<script setup lang="ts">
import type {MenuRecordRaw} from '@/typings/core';

import {computed} from 'vue';

import {MenuBadge, MenuItem, SubMenu as SubMenuComp} from './components';
// eslint-disable-next-line import/no-self-import
import SubMenu from './sub-menu.vue';

interface Props {
  /**
   * 菜单项
   */
  menu: MenuRecordRaw;
}

defineOptions({
  name: 'SubMenuUi',
});

const props = withDefaults(defineProps<Props>(), {});

/**
 * 判断是否有子节点，动态渲染 menu-item/sub-menu-item
 */
const hasChildren = computed(() => {
  const {menu} = props;
  return (
      Reflect.has(menu, 'children') && !!menu.children && menu.children.length > 0
  );
});
</script>

<template>
  <MenuItem
      v-if="!hasChildren"
      :key="menu.path"
      :active-icon="menu.activeIcon"
      :badge="menu.badge"
      :badge-type="menu.badgeType"
      :badge-variants="menu.badgeVariants"
      :icon="menu.icon"
      :path="menu.path"
  >
    <template #title>
      <span>{{ menu.name }}</span>
    </template>
  </MenuItem>
  <SubMenuComp
      v-else
      :key="`${menu.path}_sub`"
      :active-icon="menu.activeIcon"
      :icon="menu.icon"
      :path="menu.path"
  >
    <template #content>
      <MenuBadge
          :badge="menu.badge"
          :badge-type="menu.badgeType"
          :badge-variants="menu.badgeVariants"
          class="right-6"
      />
    </template>
    <template #title>
      <span>{{ menu.name }}</span>
    </template>
    <template v-for="childItem in menu.children || []" :key="childItem.path">
      <SubMenu :menu="childItem"/>
    </template>
  </SubMenuComp>
</template>
